class Slider {
    constructor() {
      this.big_box = document.querySelector('#slide');
      this.ul_li = this.big_box.children[0].children;
      this.num = this.ul_li.length;
      this.ol_li = this.addEle();
      this.cur_index = 0;
      this.slide();
      this.addEvent();
      this.autoPlay();
    }
    addEle() {
      let ol = document.createElement('ol');
      let arr = [];
      for (let i = 0; i < this.num; i++) {
        let li = document.createElement('li');
        ol.appendChild(li);
        arr.push(li);
      }

      this.big_box.appendChild(ol);

      return arr;
    }
    slide() {
      for (let i = 0; i < this.num; i++) {
        this.ul_li[i].style.display = 'none';
        this.ol_li[i].style.backgroundColor = 'gray';
      }
      this.ul_li[this.cur_index].style.display = 'block';
      this.ol_li[this.cur_index].style.backgroundColor = 'red';


    }
    addEvent() {
      for (let i = 0; i < this.num; i++) {
        this.ol_li[i].onmouseenter = function () {
          this.cur_index = i;
          this.slide();
        }.bind(this);
      }

    }
    autoPlay() {
      this.timer = setInterval(() => {
        this.cur_index++;
        if (this.cur_index === this.num) {
          this.cur_index = 0;
        }
        this.slide();
      }, 2000)
      this.big_box.onmouseenter = function () {

        clearInterval(this.timer);
      }.bind(this);
      this.big_box.onmouseleave = function () {
        this.autoPlay();
      }.bind(this);
    }
  }
  new Slider();